import React, { Component } from "react";
import autobind from "autobind-decorator";
import { mid2Url } from "@ali/ding-mediaid";
import DDAvatar from "../../components/Avatar";
import { get } from "../../utils/db"

export default class BirthdayList extends Component {
    constructor(props) {
        super(props);
    }

    renderDayBlock(day, data) {
        const month = this.props.month;
        const day_text = `${month}月${day}日`
        const list_items = []
        for (const v of data) {
            list_items.push(
                <div className="list_item">
                    <DDAvatar
                        name={v.userName}
                        fontSize={28}
                        width={66}
                        avatar={v.avatar && mid2Url(v.avatar, { imageSize: "thumb" })}
                        className="avatar"
                    />
                    {v.deptName ? 
                    <div className="name_dept">
                        <p className="name">{v.userName}</p>
                        <p className="dept">{v.deptName || <span>&nbsp;</span>}</p>
                    </div> :
                    <div className="only_name">
                        <p className="name">{v.userName}</p>
                    </div>
                    }
                </div>
            )
        }
        return (
            <div className="day_block_container">
                <div className="day">{day_text}</div>
                <div className="list_items_container">
                    {list_items}
                </div>
            </div>
        );
    }

    @autobind
    notifyDing() {
        dd.biz.ding.create({
            users: this.props.notHaveBirthdayEmpUserIds, // 用户列表，工号
            corpId: get("corpId"), // 企业id
            type: 2, // 附件类型 1：image  2：link
            alertType: 2, // 钉发送方式 0:电话, 1:短信, 2:应用内
            attachment: {
              title: "点击编辑基本信息",
              url: `${window.location.origin}${window.location.pathname}#steps`,
              text: "进入钉钉智能人事维护个人基本信息",
              image: "https://gw.alicdn.com/tfs/TB13u27aOqAXuNjy1XdXXaYcVXa-88-88.png"
            }, // 附件信息
            text: "请在个人档案页录入身份证信息添加生日，方便我们为你准备生日祝福！", // 正文
            bizType: 0, // 业务类型 0：通知DING；1：任务；2：会议；
            onSuccess: function() {
              //onSuccess将在点击发送之后调用
            },
            onFail: function() {}
          });
    }

    render() {
        const data = this.props.data;
        const count = this.props.count;
        const day_blocks = [];
        const showManage = this.props.showManage;
        for (const key in data) {
            day_blocks.push(this.renderDayBlock(key, data[key]));
        }
        if (count === 0) {
            return (
                <div className={`scroll-body memorial-body${!showManage ? " no-padding-bottom" : ""}`}>
                    <div className="no_data_block">
                        <img src="https://gw.alicdn.com/tfs/TB11uImbILJ8KJjy0FnXXcFDpXa-229-221.png" alt=""/>
                        <p>本月没有同事过生日</p>
                        {   showManage && this.props.notHaveBirthdayEmpTotalNum && this.props.notHaveBirthdayEmpTotalNum > 0 &&
                            <p className="notify_message">
                                {this.props.notHaveBirthdayEmpTotalNum}位同事没有录入生日
                                <span className="notify_btn" onClick={this.notifyDing}>提醒一下</span>
                            </p>
                        }
                    </div>
                </div>
            )
        }
        return (
            <div className={`scroll-body memorial-body${!showManage ? " no-padding-bottom" : ""}`}>
                <div className="memorial_emp_list" >
                    <h5 className="pseudo_block"></h5>
                    <div className="day_blocks_container">
                        {day_blocks}
                    </div>
                </div>
                {   showManage && this.props.notHaveBirthdayEmpTotalNum && this.props.notHaveBirthdayEmpTotalNum > 0 &&
                    <p className="notify_message">
                        {this.props.notHaveBirthdayEmpTotalNum}位同事没有录入生日
                        <span className="notify_btn" onClick={this.notifyDing}>提醒一下</span>
                    </p>
                }
            </div>
        );
    }
}